<template>
  <view style="padding-bottom: 130rpx">
    <view class="back" @click="goBack">
      <u-icon name="arrow-left" size="24" color="#fff"></u-icon>
    </view>
    <view class="sc" @click="goBack">
      <u-icon name="star" size="24" color="#fff" v-if="!isSc"></u-icon>
      <u-icon name="star-fill" size="24" v-else c olor="#5CCBC1"></u-icon>
    </view>
    <u-swiper :list="list2" height="305"></u-swiper>
    <view class="main">
      <view class="price">
        <view class="l"><text>￥</text>{{ info?.price }}</view>
        <!-- <view class="hyPri">+3000积分</view> -->
      </view>
      <view class="title"> <text class="goodText">会员升级</text> {{ info?.title }} </view>
      <view class="gm"> {{ info?.sellSum }} +已购买</view>
    </view>

    <view class="main">
      <view>图文详情</view>
      <view class="ctn">{{ info?.description }}</view>
    </view>
    <view class="bottomBox">
      <u-button type="primary" shape="circle" color="#80d8cf" @click="goBuy">立即购买</u-button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { YCselectGoldDetail } from "@/api/order";
import { useStore } from "@/stores/counter";
import { goBack, goPage } from "@/utils/commonFn";
import { onMounted, ref } from "vue";
const { goodId } = defineProps<{
  goodId: string;
}>();
const list2 = ref<any[]>([]);
const info = ref();
onMounted(async () => {
  const res = await YCselectGoldDetail({
    goodId,
  });
  info.value = res.goodInfo;
  list2.value.push(res.goodInfo.picurl);
});
const isSc = ref(false);

const goBuy = async () => {
  info.value.goodSum = 1;
  useStore().setGoodsInfo([{ ...info.value }]);
  uni.navigateTo({
    url: `/pages/shop/goodsDetails/goodOrder?type=huiyuan`,
  });
};
</script>
<style lang="less" scoped>
.sc {
  position: absolute;
  top: 102rpx;
  right: 32rpx;
  width: 60rpx;
  height: 60rpx;
  background: rgba(176, 176, 176, 0.5);
  z-index: 99;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main {
  background: #ffffff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding: 32rpx 24rpx;
  .price {
    display: flex;
    align-items: center;
    .l {
      font-size: 48rpx;
      color: #ea3b3b;
      text {
        font-size: 24rpx;
      }
    }
    .hyPri {
      color: #ea3b3b;
      font-size: 32rpx;
      display: flex;
    }
  }
  .label {
    font-size: 22rpx;
    color: #ea3b3b;
    background: #ffecec;
    width: 116rpx;
    height: 30rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    text-align: center;
  }
  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #000000;
    line-height: 40rpx;
    margin-top: 18rpx;
    .goodText {
      background: #7fd9cb;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      color: #fff;
      text-align: center;
      padding: 2rpx 4rpx;
      margin-right: 4rpx;
      font-size: 26rpx;
    }
  }
  .gm {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #8a8a8d;
    margin-top: 36rpx;
  }
}
.ctn {
  margin-top: 20rpx;
}
.bitem {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;
  .l {
    font-size: 24rpx;
    color: #8a8a8d;
    margin-right: 48rpx;
  }
  .r {
    width: calc(100% - 120rpx);
    font-size: 24rpx;
    color: #333333;
    display: flex;

    justify-content: space-between;
  }
  &:last-child {
    margin-bottom: 0rpx;
  }
}
.bottomBox {
  display: flex;
  justify-content: space-between;
  .tjgwc {
    display: flex;
    align-items: center;
    .b {
      font-size: 24rpx;
      color: #595959;
      margin-right: 30rpx;
      text-align: center;
      image {
        width: 48rpx;
        height: 48rpx;
        background: #6b7851;
      }
    }
  }
  .btn {
    display: flex;
    .gwcIcon {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f1faf9;
      border-radius: 200rpx 0rpx 0rpx 200rpx;
      font-size: 28rpx;
      color: #81d8d0;
      padding: 0 24rpx;
    }
    .gwcbtn {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #81d8d0;
      font-weight: 500;
      font-size: 28rpx;
      color: #ffffff;
      border-radius: 0rpx 200rpx 200rpx 0rpx;
      padding: 0 24rpx;
    }
  }
}
</style>
